<template>
	<view class="comeSubmit">
		<!-- 材料出库 --- 发起提交 -->

		<view class="content">
			<view class="nav" @click="getSelectProject" v-if="projectCascade.length !==0 ">
				<view class="name">
					<view class="t1">{{ projectCascade[0] }}</view>
					<view class="t2">{{ projectCascade[1] }} / {{ projectCascade[2] }}</view>
				</view>
				<u-icon name="arrow-right" color="#A7AEBD" size="22"></u-icon>
			</view>

			<view class="nav2" @click="getSelectProject" v-else>
				<text class="name">
					<text class="active">点击选择项目-标段-工点</text>
				</text>
				<u-icon name="arrow-right" color="#A7AEBD" size="22"></u-icon>
			</view>

			<view class="nav2" @click="getComeMaterialUnit">
				<text class="name">
					<text class="fonzt">添加材料至出库单</text>
				</text>
				<u-icon name="arrow-right" color="#A7AEBD" size="22"></u-icon>
			</view>

			<view class="nav2 shadow">
				<text class="name">
					<text class="fonzt">材料出库单</text>
				</text>
				<text class="num">{{tableData.length}}</text>
				<u-icon name="arrow-right" color="#A7AEBD" size="22"></u-icon>
			</view>
			<view class="info">
				<view class="item" v-for="(item,index) in tableData" :key="index">
					<view class="header">
						<view class="name">{{item.name}}</view>
						<view class="value">{{item.deviceTypeName}}</view>
					</view>
					<view class="item-body">
						<view class="item-nav">
							<view class="name">规格型号：</view>
							<view class="value">{{item.specificationModel}}</view>
						</view>
						<view class="item-nav">
							<view class="name">过保日期：</view>
							<view class="value">{{item.time}}</view>
						</view>
						<view class="item-nav">
							<view class="name">基地名称：</view>
							<view class="value">{{item.stationName}}</view>
						</view>
				<!-- 		<view class="item-nav">
							<view class="name">存储区域：</view>
							<view class="value">{{item.storageAreaName}}</view>
						</view> -->
						<view class="item-nav">
							<view class="name">库存量：</view>
							<view class="value">{{item.num}}吨</view>
						</view>
						<view class="item-nav m40">
							<view class="name">出库量：</view>
							<view class="value right">
								<text class="unit">{{item.outNum}}吨</text>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="fixedButton">
			<u-button type="primary"  :loading="loading" text="提交" @click="submit"></u-button>
		</view>

	</view>
</template>

<script>
	import { mapMutations, mapState } from "vuex"
import { getMaterialOutSaveEx } from "@/api/materials/materials.js"
 	import mixins from "@/utils/mixins.js"
	export default {
		name: "comeSubmit",
 		mixins: [mixins],
		props: {
			projectCascade: Array,
		},
		data() {
			return {
				comeNum: "",
				loading: false,
				tableData: [],
			}
		},
		computed: {
			...mapState('materials',['materialsComeList','checkBoxSelectList','projectSiteId'])
		},
		mounted() {
			let that=this
			console.log(this.materialsComeList)
			this.tableData=this.materialsComeList
			// this.$$off('data-submit')
			// this.$$on('data-submit', data => {
			// 	console.log(data)
			// 	if(!data && data.length!==0){
			// 		that.tableData = data
			// 		console.log(this.tableData.length)
			// 		console.log('tabData', this.tableData)
			// 	}
			
			// })
		},
		methods: {
			...mapMutations('materials', ["getMaterialsComeList", "getMaterialsGoBackSubmitItem", "getProjectName", "getProjectSiteId"]),
			comeNumChange(val) {
				// console.log(val)
				this.projectCascadeName=val
			},
			// 选择项目
			getSelectProject() {
				uni.navigateTo({
					url: "/subpackage-materials/pages/materials/materialsCome/components/selectProject"
				})
			},

			getComeMaterialUnit() {
				uni.navigateTo({
					url: "/subpackage-materials/pages/materials/materialsCome/components/comeMaterialUnit"
				})
			},
			submit(){
				console.log(this.projectCascadeName)
				// let _data{
				// 	projectId:this.projectId,
				// 	siteId:this.siteId,
				// 	projectCascade:this.projectCascade,
				// 	materialNames:this.materialNames,
				// 	materialList:this.materialList
				// }
				if(this.tableData && this.tableData.length>0){
					console.log(this.tableData,'tableData')
					let materialList=[]
					let projectCascade = ""
					this.tableData.forEach(item=>{
						let tmp={
							materialId:item.id,
							num:item.outNum
						}
						materialList.push(tmp)
					})
					let nameList=this.tableData.map(item=>item.deviceTypeName)
					let names=Array.from(new Set(nameList)).join(",")
					console.log('names',names)
					console.log('materialList',materialList)
					if(this.projectCascade && this.projectSiteId){
						projectCascade = this.projectCascade.join("/")
						let _data = {
							siteId: this.projectSiteId,
							projectCascade: projectCascade,
							materialNames: names,
							materialList:materialList
						}
						
						this.loading = true
						
				   getMaterialOutSaveEx(_data).then(res=>{
						   console.log(res)
						   // 重置vuex中的数据
						   this.getMaterialsComeList([])
						   this.getMaterialsGoBackSubmitItem([])
						   this.getProjectName("")
						   this.getProjectSiteId("")
						   this.tableData = []
						   uni.showToast({
							icon: "none",
							title: "保存成功"
						   })
						   this.confirm()
						   this.loading = false
						}).catch(()=>{this.loading = false})
						
						
					}
					
				}
			},
			confirm(){
				this.$emit('confirm', true)
			},
		},
	}
</script>

<style lang="scss" scoped>
	.comeSubmit {
		padding-bottom: 120rpx;
		font-family: PingFang SC-Bold, PingFang SC;

		.nav2 {
			height: 105rpx;
			border-bottom: 2rpx solid #E2E5ED;
			padding: 0rpx 35rpx;
			line-height: 105rpx;
			display: flex;
			align-items: center;

			.name {
				flex: 1;
			}

			.fonzt {
				font-size: 32rpx;
				font-weight: bold;
				color: #445469;
			}

			.num {
				margin-right: 20rpx;
				font-size: 32rpx;
				font-weight: bold;
				color: #445469;
			}
		}

		.active {
			color: #C0C0C0;
		}

		.nav {
			height: 150rpx;
			border-bottom: 2rpx solid #E2E5ED;
			padding: 0rpx 35rpx;
			display: flex;
			align-items: center;

			.name {
				flex: 1;
				font-weight: 500;

				.t1 {
					height: 60%;
					font-size: 32rpx;
					font-weight: bold;
					color: #445469;
					line-height: 60rpx;
				}

				.t2 {
					height: 40%;
					font-size: 28rpx;
					color: #6A819E;
				}
			}
		}

		.shadow {
			box-shadow: 0rpx 8rpx 8rpx 2rpx rgba(47, 128, 237, 0.1);
		}


		.info {
			margin-top: 30rpx;

			.item {
				width: 100%;
				background: #FFFFFF;
				margin-bottom: 15rpx;
				border-bottom: 2rpx solid #E2E5ED;

				.header {
					font-size: 30rpx;
					line-height: 88rpx;
					font-weight: bold;
					color: #445469;
					height: 88rpx;
					padding-left: 35rpx;
					display: flex;

					.name {
						flex: 1;
					}

					.value {
						margin-right: 30rpx;
					}
				}

				.item-body {
					padding: 26rpx 35rpx;
					padding-bottom: 10rpx;
					padding-top: 0rpx;

					.item-nav {
						display: flex;
						align-items: center;
						font-size: 28rpx;
						font-weight: 500;
						color: #445469;
						margin-bottom: 18rpx;

						.name {
							width: 160rpx;
						}

						.value {
							flex: 1;

						}

						.right {
							display: flex;
							align-items: center;
							justify-content: flex-end;
						}

						.unit {
							margin-left: 10rpx;
						}
					}

					.m40 {
						justify-content: space-between;
						margin-top: 20rpx;
					}

				}
			}
		}

		.button {
			position: fixed;
			bottom: 0;
			left: 0;
			width: 100%;
			height: 105rpx;
			line-height: 105rpx;
			color: #FFFFFF;
			font-size: 32rpx;
			font-weight: 500;
			background-color: #2F80ED;
			text-align: center;
		}
	}
</style>
